<template>
  <div id="word">
      <headerNav :menu="showMenu" :menuList="login.pageList"></headerNav>
      <header>
        <p>当前模块：内容制作模块  当前登录人：{{login.name}} 登录时间：{{login.loginTime | timeFormat}}</p>
        <div>
        <el-button size="mini" type="primary" @click="$router.push('login')" icon="el-icon-delete">退出</el-button>
        <el-button size="mini" type="primary" @click="reflash()" icon="el-icon-refresh">刷新</el-button>
        </div>
      </header>
      <div class="wrap">
        <h2>
          一、选择模板类型
        </h2>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="模板类型1" name="first">
              <div class="children">
                 <h2>二、选择子模板</h2>
                <el-tabs tab-position="left">
                  <el-tab-pane label="用户管理">子模板1</el-tab-pane>
                  <el-tab-pane label="配置管理">子模板1</el-tab-pane>
                  <el-tab-pane label="角色管理">子模板1</el-tab-pane>
                  <el-tab-pane label="定时任务补偿">子模板1</el-tab-pane>
                </el-tabs>
              </div>
          </el-tab-pane>
          <el-tab-pane label="模板类型2" name="second">模板类型2</el-tab-pane>
          <el-tab-pane label="模板类型3" name="third">模板类型3</el-tab-pane>
          <el-tab-pane label="模板类型4" name="fourth">模板类型4</el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>
<script>
  import {timeFormat} from '../../assets/time.js'
  import headerNav from '../header.vue'
  export default {
    components: {headerNav},
    name: 'cword',
    data () {
      return {
        showMenu: true,
        login: {
          name: '',
          loginTime: '',
          pageList: []
        },
        activeName: 'first'
      }
    },
    filters: {
      timeFormat: function (val) {
        return val ? timeFormat(val, 'yyyy-MM-dd hh:mm:ss') : ''
      }
    },
    mounted: function () {
      this.getLoginMess()
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      reflash () {
        location.reload()
      },
      getLoginMess () {
        this.$http.get('http://localhost:9081/getLoginMess').then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.login = Object.assign(res.data.data)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      handleClick () {

      }
    }
}
</script>
<style scoped  lang="less">
    #word{
      header{
        width:100%;
        height:40px;
        background: #fff;
        border:1px solid #ccc;
        box-shadow: 0 1px rgba(0,0,0,.2);
        display: flex;
        font-size:16px;
        padding:4px 8px;
        align-items: center;
        justify-content: flex-end;
        p{
          padding-right:16px;
        }
      }

      .wrap{
        margin-top:8px;
        padding:16px;
        background: #fff;
        h2{
          font-size:16px;
          line-height:32px;
        }
        .children{
          padding:16px;
          border:1px solid #ccc;
          border-radius: 4px;
        }
      }
    }
</style>